<template>
  <div>
    <Tips></Tips>
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox :name="i.id" v-for="i in cartList" :key="i.id" @click="changeChecked(i)">
        <van-swipe-cell>
          <van-card
            :num="i.number"
            :price="i.retail_price"
            :title="i.goods_name"
            :thumb="i.list_pic_url"
          />
          <template #right>
            <van-button
              class="deleteBtn"
              square
              type="danger"
              @click="deleteGoodsBtn(i.product_id)"
              text="删除"
            />
          </template>
        </van-swipe-cell>
        <!-- 步进器 -->
        <van-stepper @change="changeNumber(i)" v-show="isEditing" v-model="i.number" />
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
      <template #tip>
        累计共
        <span>{{cartTotal.checkedGoodsCount}} 件商品</span>
        <van-button
          :type="isEditing?'danger':'primary'"
          size="mini"
          @click="showEdit"
        >{{isEditing?'完成编辑':'编辑'}}</van-button>
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from '../components/tips'
import { getCartData, changeGoodsChecked, changeGoodsUpdate, deleteGoods } from '../api/cart'
export default {
  components: {
    Tips
  },
  data () {
    return {
      // 选中商品数组 根据checked值为1添加到数组
      result: [],
      // 全选
      // checkedAll: true,
      // 购物车数据
      cartList: [],
      // 商品总信息
      cartTotal: [],
      // 编辑状态设置
      isEditing: false
    }
  },
  methods: {
    onClickEditAddress () { },
    onSubmit () {
    },
    // 获取购物车数据
    async getCartDataList () {
      const res = await getCartData()
      if (res.errno === 0) {
        this.totalFn(res.data)
      }
    },
    // 改变选中点击事件
    async changeChecked (i) {
      // 判断是否是编辑 如果处于编辑状态不做任何事
      if (this.isEditing) return
      const res = await changeGoodsChecked({
        isChecked: i.checked === 0 ? 1 : 0,
        productIds: i.product_id
      })
      console.log(res)
      if (res.errno === 0) {
        this.totalFn(res.data)
      }
    },
    // 封装数据操作
    totalFn (data) {
      this.cartList = data.cartList
      this.cartTotal = data.cartTotal
      // 清空results数组
      this.result = []
      // 判断checked
      this.cartList.map(item => {
        if (item.checked === 1) {
          this.result.push(item.id)
        }
      })
    },
    // 编辑按钮
    showEdit () {
      this.isEditing = !this.isEditing
    },
    // 步进器事件
    async changeNumber (i) {
      const res = await changeGoodsUpdate({
        goodsId: i.goods_id,
        id: i.id,
        number: i.number,
        productId: i.product_id
      })
      if (res.errno === 0) {
        this.totalFn(res.data)
      }
    },
    // 删除
    async deleteGoodsBtn (pid) {
      const res = await deleteGoods({
        productIds: pid.toString()
      })
      console.log(res)
      if (res.errno === 0) {
        this.totalFn(res.data)
      }
    }
  },
  computed: {
    // 计算是否全选
    checkedAll: {
      get () {
        // 选中商品的数组和购物车的数组长度相等说明全选 否则不是全选
        return this.result.length === this.cartList.length
      },
      // 值变化就执行
      async set (val) {
        // 是否选中数组
        const idsArr = []
        this.cartList.map(item => {
          idsArr.push(item.product_id)
        })
        const res = await changeGoodsChecked({
          isChecked: val ? 1 : 0,
          productIds: idsArr.join()
        })
        if (res.errno === 0) {
          this.totalFn(res.data)
        }
      }
    }
  },
  created () {
    this.getCartDataList()
  }
}
</script>

<style lang="less" scoped>
.deleteBtn {
  height: 100%;
}
.van-stepper {
  text-align: right;
}
/deep/.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 1.5rem;
  /deep/.van-checkbox {
    padding: 0.1rem 0.15rem;
    border-bottom: 1px solid #ccc;
  }
}
/deep/.van-submit-bar {
  bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
/deep/.van-checkbox__label {
  flex: 1;
}
</style>
